<script>
export default {
  name: 'swiper',
  props: {
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    interval: {
      type: Number,
      default: 3000
    },
    autoPlay: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<template>
  <slider class="slider" :interval="interval" :auto-play="autoPlay" v-if="list.length">
    <div class="slider-item" v-for="(img,$index) in list" :key="$index">
      <image class="slider-image" resize="cover" :src="img.img_url"></image>
    </div>
    <indicator class="indicator"></indicator>
  </slider>
</template>
<style scoped>
.slider {
  width: 750px;
  height: 450px;
  position: relative;
}

.slider-image {
  width: 750px;
  height: 450px;
}

.indicator {
  width: 150px;
  height: 50px;
  item-color: #ccc;
  item-selected-color: #fff;
  item-size: 15px;
  position: absolute;
  bottom: 10px;
  right: 20px;
}
</style>
